<template>
  <div>
    <VolBox :lazy="true" :model.sync="model1" title="选择成员" :width="600" :height="300">
      <div class="txt">指定分配给具有外部联系人权限的成员</div>
      <VolForm ref="formRules1" :label-width="80" :formFields="formFields1" :formRules="formRules1">
      </VolForm>
      <div slot="footer">
        <Button type="success" @click="submit1">确定</Button>
        <Button type="default" @click="model1 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :lazy="true" :model.sync="model2" title="退回公海" :width="600" :height="300">
      <VolForm ref="formRules2" :label-width="80" :formFieldsdescribe="formFields2"
        :formRules="formRules2">
      </VolForm>
      <div slot="footer">
        <Button type="success" @click="submit2">确定</Button>
        <Button type="default" @click="model2 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :lazy="true" :model.sync="model4" title="绑定非企微客户" :width="600" :height="300">
      <div class="txt">
        温馨提示：绑定非企微客户后，不支持解绑。从该成员的非企微客户里进行搜索查询，一旦手动绑定后，在非企微客户里更新的客户资料、打上的客户标签、添加的跟进记录，同步至企微客户中。其中，客户资料以非企微客户的资料为准同步，客户标签为去重同步。
      </div>
      <el-input placeholder="请输入客户姓名、手机号、公司名称" v-model="model4Input" class="inp">
        <el-button type="success" slot="append" @click="model4Search">搜索</el-button>
      </el-input>
      <VolTable ref="editTable1" :columns="columns" :max-height="370" :index="true" :ck="false"
        :tableData="tableData"></VolTable>
      <div slot="footer">
        <Button type="success" @click="submit4">确定</Button>
        <Button type="default" @click="model4 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :lazy="true" :model.sync="model5" title="客户详情" :width="800" :height="500">
      <div class="model5Top">
        <div class="model5Top_le"><img :src="detail.avatar" /></div>
        <div class="model5Top_Ri">
          <h2>{{ detail.name }}
            <span class="qywx">@ {{ detail.contact_type == 1 ? "微信" : "企业微信" }}</span>
            <span v-show="!REMAKSTATUS">( {{ detail.remark }} )</span>
            <i class="ivu-icon"
              :class="detail.gender == 1? 'ivu-icon-md-male': 'ivu-icon-md-female'"
              :style="{color:detail.gender == 1? ' rgb(66, 126, 186)' : 'rgb(237, 73, 151)'}"></i>
            <el-input size="small" placeholder="输入用户的备注" v-model="upRemark" v-if="REMAKSTATUS">
              <el-button size="small" slot="append" icon="el-icon-check"
                @click="setRemarks"></el-button>
            </el-input>
            <!-- <i class="el-icon-edit" @click="updateDet(1)" v-else></i> -->
          </h2>
          <div>来源：{{add_way }}</div>
          <div>手机：暂无</div>
          <div>所在地：暂无</div>
          <div>标签：
            <span v-if="detail.tag_id == ''">暂无</span>
            <el-button v-else v-for="(i,ii) in tagList" :key="ii" type="success"
              size="mini">{{ i }}</el-button>
            <!-- <i class="el-icon-edit" @click="updateDet(2)"></i> -->
          </div>
          <div>描述：{{detail.position == null ? '暂无': detail.position }}
            <!-- <i class="el-icon-edit" @click="updateDet(3)"></i> -->
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="跟进记录" name="first">
          <el-form ref="formRules5GJ" :model="formFields5GJ" label-width="80px">
            <el-form-item label="状态">
              <el-select v-model="formFields5GJ.followup" placeholder="请选择活动区域">
                <el-option v-for="(i,ii) in followUpList" :key="ii" :label="i.value"
                  :value="i.key"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内容">
              <el-input type="textarea" v-model="formFields5GJ.follow_content"></el-input>
            </el-form-item>
          </el-form>
          <Button type="success" size="small" @click="submit5GJ" :disabled="M5GJSTATUS">提交</Button>
          <div>
            <div v-for="(i,ii) in getFllowList" :key="ii" class="follow">
              <i class="el-icon-chat-dot-square"></i>
              <div class="fr">
                <div> {{ i.createDate }}</div>
                <!-- <div>{{ i.creator }}发表：{{ UPTYPE(i.external_userid) }}</div> -->
                <div> <span class="creator">{{ i.creator }} </span> 发表：</div>
                <div class="content">{{ i.follow_content }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="互动轨迹" name="second">互动轨迹</el-tab-pane> -->
        <el-tab-pane label="用户画像" name="third">
          <Button type="success" size="small" @click="model5BJ" v-if="YHSTATUS">编辑</Button>
          <div v-else>
            <Button type="success" size="small" @click="submit5YH(0)">提交</Button>
            <Button type="default" size="small" @click="submit5YH(1)">取消</Button>
          </div>
          <VolForm ref="formRules5y" :label-width="80" :formFields="formFields5y"
            :formRules="formRules5y"></VolForm>
        </el-tab-pane>
        <!-- <el-tab-pane label="聊天记录" name="fourth">聊天记录</el-tab-pane> -->
      </el-tabs>
      <div slot="footer">
        <Button type="default" @click="model5 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :lazy="true" :model.sync="model6" title="打标签" :width="1000" :height="500">
      <div class="model6BQ">
        <div class="model6BQI" v-for="(i,ii) in MallCustomTagList" :key="ii">
          <h3>{{ i.group_name }}: </h3>
          <el-button v-for="(j,jj) in i.chilren" :key="jj" size="mini" @click="BQCLICK(j)"
            :class="{'activeName': butIndex.indexOf(j.tag_id) > -1}">{{ j.tag_name }}</el-button>
        </div>
      </div>
      <div slot="footer">
        <Button type="success" @click="submit6">确定</Button>
        <Button type="default" @click="model6 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :lazy="true" :model.sync="model7" title="修改描述">
      <el-input :rows="3" type="textarea" placeholder="请输入用户的描述，150字以内" v-model="describe"
        maxlength="150" show-word-limit>
      </el-input>
      <div slot="footer">
        <Button type="success" @click="submit7">确定</Button>
        <Button type="default" @click="model7 = false">关闭</Button>
      </div>
    </VolBox>
  </div>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
import VolTable from "@/components/basic/VolTable.vue";
export default {
  name: "Mall_customBox",
  components: {
    VolBox,
    VolForm,
    VolTable,
  },
  data() {
    return {
      model1: false,
      model2: false,
      model3: false,
      model4: false,
      model5: false,
      model6: false,
      model7: false,
      formFields1: {
        piao: "",
      },
      formRules1: [
        [
          {
            title: "企业成员",
            field: "piao",
            type: "select",
            dataKey: "add_way",
            data: [],
          },
        ],
      ],
      formFields2: {
        asdsads: "",
      },
      formRules2: [
        [
          {
            title: "选择公海",
            field: "asdsads",
            type: "select",
            dataKey: "add_way",
            data: [],
          },
        ],
      ],
      formFields3: {
        ddddd: "",
      },
      formRules3: [
        [
          {
            title: "",
            field: "ddddd",
            type: "select",
            dataKey: "add_way",
            data: [],
          },
        ],
      ],
      formFields4: {
        gggg: "",
      },
      formRules4: [
        [
          {
            title: "",
            field: "gggg",
            type: "select",
            dataKey: "add_way",
            data: [],
          },
        ],
      ],
      columns: [
        {
          field: "cardno",
          title: "客户姓名",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "cardstatus",
          title: "手机号",
          type: "int",
          width: 120,
          align: "left",
        },
        {
          field: "cardtype",
          title: "公司名称",
          type: "int",
          width: 120,
          align: "left",
        },
      ],
      model4Input: "",
      tableData: [],
      detail: {},
      addWayList: [],
      customtagList: [],
      activeName: "first",
      formFields5y: {
        name: "",
        mobile: "",
        hobby: "",
        birthday: "",
        IdCard: "",
        email: "",
        address: "",
        education: "",
        annualincome: "",
        area: "",
        age: "",
        company: "",
        wechatnumber: "",
        offlinesource: "",
      },
      formRules5y: [
        [
          {
            title: "姓名",
            field: "name",
            type: "text",
            disabled: true,
          },
          {
            title: "手机号",
            field: "mobile",
            type: "text",
            disabled: true,
          },
        ],
        [
          {
            title: "爱好",
            field: "hobby",
            type: "text",
            disabled: true,
          },
          {
            title: "生日",
            field: "birthday",
            type: "text",
            disabled: true,
          },
        ],
        [
          {
            title: "身份证",
            field: "IdCard",
            type: "text",
            disabled: true,
          },
          {
            title: "邮箱",
            field: "email",
            type: "text",
            disabled: true,
          },
        ],
        [
          {
            title: "地址",
            field: "address",
            type: "text",
            disabled: true,
          },
          {
            title: "学历",
            field: "education",
            type: "text",
            disabled: true,
          },
        ],
        [
          {
            title: "年收入",
            field: "annualincome",
            type: "text",
            disabled: true,
          },
          {
            title: "区域",
            field: "area",
            type: "text",
            disabled: true,
          },
        ],
        [
          {
            title: "年龄",
            field: "age",
            type: "text",
            disabled: true,
          },
          {
            title: "公司",
            field: "company",
            type: "text",
            disabled: true,
          },
        ],
        [
          {
            title: "微信号",
            field: "wechatnumber",
            type: "text",
            disabled: true,
          },
          {
            title: "线下客户来源",
            field: "offlinesource",
            type: "text",
            disabled: true,
          },
        ],
        // [
        //   {
        //     title: "QQ",
        //     field: "sjh",
        //     type: "text",
        //     disabled: true,
        //   },
        //   {
        //     title: "图片",
        //     field: "sjh",
        //     type: "img",
        //     disabled: true,
        //   },
        // ],
        // [
        //   {
        //     title: "行业",
        //     field: "sjh",
        //     type: "text",
        //     disabled: true,
        //   },
        // ],
      ],
      YHSTATUS: true,
      describe: "",
      upRemark: "",
      REMAKSTATUS: false,
      MallCustomTagList: [],
      butIndex: [],
      formFields5GJ: {
        followup: "",
        follow_content: "",
        external_userid: "",
        createID: "",
        createDate: "",
        creator: "",
      },
      M5GJSTATUS: true,
      followUpList: [],
      getFllowList: [],
    };
  },
  watch: {
    "formFields5GJ.follow_content": {
      handler(n, o) {
        if (n.length > 0) {
          this.M5GJSTATUS = false;
        } else {
          this.M5GJSTATUS = true;
        }
      },
    },
  },
  computed: {
    add_way() {
      if (this.detail.add_way) {
        let way = this.addWayList.filter((i) => {
          if (i.key == this.detail.add_way) {
            return i;
          }
        });
        return way[0].value;
      }
    },
    tagList() {
      if (this.detail.tag_id) {
        let arr = [];
        let tagId = this.detail.tag_id.split(",");
        this.customtagList.forEach((i) => {
          if (tagId.includes(i.key)) {
            arr.push(i.value);
          }
        });
        return arr;
      }
    },
  },
  created() {
    this.getAddWay();
  },
  methods: {
    getAddWay() {
      this.http
        .post("/api/Dictionary/GetVueDictionary", [
          "add_way",
          "customtag",
          "followUp",
        ])
        .then((res) => {
          res.forEach((i) => {
            if (i.dicNo == "add_way") {
              this.addWayList = i.data;
            } else if (i.dicNo == "customtag") {
              this.customtagList = i.data;
            } else if (i.dicNo == "followUp") {
              this.followUpList = i.data;
            }
          });
        });
    },
    submit1() {},
    submit2() {},
    model4Search() {
      console.log(26374);
    },
    submit4() {},
    model5Open(e) {
      this.model5 = true;
      this.detail = e;
      this.formFields5y = e;
      this.formFields5GJ.followup = e.followup;
      this.formFields5GJ.external_userid = e.external_userid;
      this.getMall_custom_follow();
    },
    getMall_custom_follow() {
      let parmas = {
        order: "desc",
        page: 1,
        rows: 30,
        sort: "createDate",
        wheres: `[{\"name\":\"external_userid\",\"value\":\"${this.detail.external_userid}\",\"displayType\":\"text\"}]`,
      };
      this.http
        .post("/api/Mall_custom_follow/getPageData", parmas)
        .then((res) => {
          this.getFllowList = res.rows;
        });
    },
    UPTYPE(e) {
      let way = this.followUpList.filter((i) => {
        if (i.key == e) {
          return i;
        }
      });
      return way[0].value;
    },
    updateDet(e) {
      switch (e) {
        case 1:
          this.upRemark = this.detail.remark;
          this.REMAKSTATUS = true;
          break;
        case 2:
          let param = {
            order: "desc",
            page: 1,
            rows: 1000,
            sort: "createDate",
            wheres: "[]",
          };
          this.http
            .post("/api/Mall_custom_tag/getPageData", param)
            .then((res) => {
              this.model6 = true;
              let newData = [];
              res.rows.forEach((v, i) => {
                var n;
                for (var i = 0; i < newData.length; i++) {
                  let t = newData[i];
                  if (t.group_id == v.group_id) {
                    n = t;
                    break;
                  }
                }
                if (!n) {
                  n = {
                    group_id: v.group_id,
                    group_name: v.group_name,
                    chilren: [],
                  };
                  newData.push(n);
                }
                n.chilren.push(v);
              });
              this.MallCustomTagList = newData;
            });
          break;
        case 3:
          this.model7 = true;
          break;
      }
    },
    handleClick(tab, event) {},
    model5BJ() {
      this.YHSTATUS = false;
      this.formRules5y.forEach((i) => {
        i.forEach((j) => {
          j.disabled = false;
        });
      });
    },
    submit5YH(e) {
      this.YHSTATUS = true;
      this.formRules5y.forEach((i) => {
        i.forEach((j) => {
          j.disabled = true;
        });
      });
      if (e == 0) {
        let parmas = {
          delKeys: null,
          detailData: null,
          mainData: this.formFields5y,
        };
        this.http.post("/api/Mall_custom/update", parmas).then((res) => {});
      }
    },
    submit5GJ() {
      let parmas = {
        delKeys: null,
        detailData: null,
        mainData: this.formFields5GJ,
      };
      this.http.post("/api/Mall_custom_follow/add", parmas).then((res) => {
        this.M5GJSTATUS = true;
        this.getMall_custom_follow();
      });
    },
    BQCLICK(item) {
      let arrIndex = this.butIndex.indexOf(item.tag_id);
      if (arrIndex > -1) {
        this.butIndex.splice(arrIndex, 1);
      } else {
        this.butIndex.push(item.tag_id);
      }
    },
    submit6() {
      this.butIndex.join();
      this.model6 = false;
    },
    submit7() {
      this.model7 = false;
    },
    setRemarks() {
      this.REMAKSTATUS = false;
    },
  },
};
</script>
<style scoped lang="less">
.txt {
  color: red;
  margin-bottom: 10px;
}
.inp {
  margin-bottom: 10px;
}
.model5Top {
  display: flex;
  .model5Top_le {
    width: 150px;
    height: 150px;
    border-radius: 5px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .model5Top_Ri {
    margin-left: 20px;
    div {
      margin-bottom: 10px;
    }
    h2 {
      margin-bottom: 10px;
      height: 30px;
    }
    .qywx {
      color: #30ab55;
      font-size: 12px;
      margin-left: 10px;
    }
    .el-input-group--append {
      width: 200px;
    }
  }
}
/deep/ .el-input-group__append {
  .el-button {
    background-color: #1890ff;
    color: #fff;
  }
}
.model6BQ {
  .model6BQI {
    margin-bottom: 10px;
    h3 {
      margin-bottom: 10px;
    }
    .activeName {
      color: #fff;
      background-color: #1890ff;
    }
  }
}
.follow {
  margin-top: 20px;
  display: flex;
  .el-icon-chat-dot-square {
    color: rgb(25, 137, 250);
    font-size: 20px;
  }
  .fr {
    width: 100%;
    margin-left: 10px;
  }
  div {
    margin-bottom: 3px;
  }
  .creator {
    color: rgb(25, 137, 250);
  }
  .content {
    background: #f9f9f9;
    padding: 10px;
  }
}
</style>